<script type="text/ng-template" id="tree_item_renderer.html">

    <div class="font-16 font-monospace storage-entry-div" ng-show="entry.key != null">
        <div class="entry-icon-div">
            <a ng-click="onExpand(entry)"
               href="#"
               ng-show="entry.expandable">
                <i class="fa" ng-class="{'fa-plus-square-o': !entry.expanded, 'fa-minus-square-o': entry.expanded}"></i>
            </a>
        </div>
        <span class="c-text font-16">{{entry.key.decoded}}</span> = <span class="font-16 storage-entry-value">{{entry.valueLabel}}</span><i class="m-l-sm font-monospace c-accent">{{entry.valueType}}</i>
    </div>

    <ul style="list-style-type: none; margin-left: 0; padding-left: 0" ng-show="entry.expanded">
        <li class="m-l-lg" ng-repeat="entry in entry.entries" ng-include="entry.template"></li>
    </ul>

    <div class="m-l-lg" ng-show="(entry.entries.length < entry.totalElements) && entry.expanded">
        <span class="m-l-md"></span>
        <a href="#" ng-click="onLoadMore(entry)">more</a>
        <span>|</span>
        <a href="#" ng-click="onShowAll(entry)">show all {{entry.total}}</a>
    </div>

</script>

<script type="text/ng-template" id="tree_string_renderer.html">

    <div class="font-16 font-monospace storage-entry-div">
        <div class="entry-icon-div"></div>
        <span class="c-text font-16">{{entry.key.decoded}}</span> = <span class="font-16 storage-entry-value">{{entry.valueLabel}}</span>&nbsp;<i class="font-monospace c-accent">{{entry.type1Label}}</i>&nbsp;(<a href="#" ng-click="onSwitchString(entry)">{{entry.type2Label}}</a>)
    </div>
</script>

<script type="text/ng-template" id="tree_value_renderer.html">

    <div class="font-16 font-monospace storage-entry-div">
        <div class="entry-icon-div"></div>
        <span class="c-text font-16">{{entry.key.decoded}}</span> = <span class="font-16 storage-entry-value">{{entry.valueLabel}}</span>&nbsp;<span class="font-16 c-text">{{entry.valueSecondLabel}}</span><i class="font-monospace c-accent">{{entry.value.typeKind || entry.value.type}}</i>
    </div>
</script>

<section class="content height-100p">

    <div class="container-fluid">

        <div class="row height-100p">
            <div class="col-lg-12">
                <div class="view-header">
                    <div class="header-icon">
                        <i class="pe page-header-icon pe-7s-albums"></i>
                    </div>

                    <div class="header-title">
                        <div class="pull-right">
                            <p ng-show="syncedBlock == 1">索引已满。 我们可以显示所有属性</p>
                            <p ng-show="syncedBlock == -1">索引尚未就绪</p>
                            <p ng-show="syncedBlock > 1">合同，自块后添加 <b class="c-white">#{{syncedBlockString}}</b>, 将正确显示</p>
                            <p>存储用于索引 <b class="c-white">{{indexSizeString}}</b> | Solc 版本 <b class="c-white">{{solcVersionString}}</b></p>
                        </div>

                        <h3 class="m-b-xs">合约</h3>
                        <small>
                            观察合同的存储区域
                        </small>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </div>


    <div class="row height-100p">

        <div class="col-lg-12 height-100p" ng-cloak>

            <div class="panel panel-filled" ng-if="isViewingStorage">

                <div class="panel-heading flex flex-justify-between">
                    <div class="flex flex-align-center">
                        <div class="m-r-md">
                            <a href="#" ng-click="onBackToList()" class="btn btn-w-md btn-default">返回目录</a>
                        </div>

                        <h3>{{storage.contractName}}</h3>
                    </div>
                    <!--<h3 class="font-monospace c-text">{{storage.address}}</h4>-->
                    <h3>Balance: {{storage.balanceString}} ETH</h3>
                </div>

                <div class="panel-body">

                    <!-- -2 suites for contracts which has been imported -->
                    <div ng-if="storage.blockNumber == -1 || syncedBlock == -1 || (storage.blockNumber < syncedBlock && storage.blockNumber != -2) || true" class="panel panel-filled panel-c-danger">
                        <div class="panel-body">
                            <span class="c-white">并非所有值都可以显示.</span> 在快速同步加载之前部署的合同可能会显示 <span class="text-accent">残缺</span> 信息.
                        </div>
                        <div class="panel-footer" ng-show="explorerUrl != null">
                            <a href="#" ng-click="onImportContract()" ng-disabled="isImportingInProgress" class="btn btn-w-md btn-warning m-r-sm">
                                从服务器导入
                            </a>
                            <span class="c-accent blink_me" ng-if="isImportingInProgress">导入中...</span>
                            <span class="text-danger">{{importingError}}</span>
                        </div>
                    </div>

                    <!--<div ng-show="storage.blockNumber == -2" class="panel panel-filled panel-c-danger">-->
                        <!--<div class="panel-footer" ng-show="explorerUrl != null">-->
                            <!--<a href="#" ng-click="onClearContract()" class="btn btn-w-md btn-warning m-r-sm">-->
                                <!--Clear for test-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</div>-->

                    <div class="storage-background" id="storage-scroll-container">
                        <div ng-controller="TreeController" style="list-style-type: none;margin-left: -17px;" ng-include="'tree_item_renderer.html'" ng-init="init(storage)">
                        </div>
                    </div>
                </div>
            </div>


            <div class="panel panel-filled" ng-if="!isAddingContract && !isViewingStorage && !isDisabled">

                <div class="panel-heading">

                    <a href="#" ng-click="onWatchContract()" class="btn btn-w-md btn-primary"
                       >
                        <i class="fa fa-eye m-r-sm"></i>
                        添加合约查看
                    </a>
                </div>

                <div class="panel-body" id="contracts-scroll-container">

                    <div class="table-responsive" >
                        <table class="table peers-table">
                            <thead>
                            <tr>
                                <th>
                                    合约名称
                                </th>
                                <th>
                                    地址
                                </th>
                                <th>
                                </th>
                                <th>
                                </th>
                            </tr>
                            </thead>
                            <tbody>

                                <tr ng-repeat="item in contracts"
                                    ng-cloak
                                    class="contract-row">
                                    <td>
                                        <a href="#" ng-click="onViewStorage(item)">{{item.name}}</a>
                                    </td>
                                    <td class="font-monospace">
                                        {{item.address}}
                                    </td>
                                    <td>
                                        <a href="#" ng-click="onViewStorage(item)">View</a>
                                    </td>
                                    <td>
                                        <a href="#" ng-click="onRemoveClick(item)">Unwatch</a>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="panel panel-filled" ng-if="isDisabled">
                合同存储已禁用
            </div>

        </div>
    </div>


    </div>
</section>